<template>
  <div class="container">
    <div class="num-div">
      档案总数<span class="num-span">{{ projectNum }}</span>
    </div>
    <div class="num-div">
      加急件数<span class="num-span">{{ urgentNum }}</span>
    </div>
    <div class="title-div">
      <h4>办理进度</h4>
    </div>
    <div class="num-div">
      缴纳契税<span class="num-span">{{ jnqsNum }}</span>
    </div>
    <div class="num-div">
      递件办证<span class="num-span">{{ djbzNum }}</span>
    </div>
    <div class="num-div">
      权证领取<span class="num-span">{{ qzlqNum }}</span>
    </div>
    <div class="num-div">
      受理抵押<span class="num-span">{{ sldyNum }}</span>
    </div>
    <div class="title-div">
      <h4>款项进度</h4>
    </div>
    <div class="num-div">
      全款完结<span class="num-span">{{ qkwjNum }}</span>
    </div>
    <div class="num-div">
      贷款完结<span class="num-span">{{ dkwjNum }}</span>
    </div>
    <div class="title-div">
      <h4>交付进度</h4>
    </div>
    <div class="num-div">
      通知客户<span class="num-span">{{ tzkhNum }}</span>
    </div>
    <div class="num-div">
      交付客户<span class="num-span">{{ jfkhNum }}</span>
    </div>
    <div class="num-div">
      回执房开<span class="num-span">{{ hzfkNum }}</span>
    </div>
  </div>
</template>

<script>
import { getAllProject } from '@/api/project'
export default {
  name: 'Developer',
  data() {
    return {
      projectList: null,
      projectNum: 0, // 档案总数
      urgentNum: 0, // 加急件数
      jnqsNum: 0, // 缴纳契税
      djbzNum: 0, // 递件办证
      qzlqNum: 0, // 权证领取
      sldyNum: 0, // 受理抵押
      qkwjNum: 0, // 全款完结
      dkwjNum: 0, // 贷款完结
      tzkhNum: 0, // 通知客户
      jfkhNum: 0, // 交付客户
      hzfkNum: 0 // 回执房开
    }
  },
  created() {
    getAllProject().then(response => {
      this.projectList = response.data
      console.log(this.projectList)

      this.projectNum = this.projectList.length
      this.urgentNum = this.projectList.filter(f => f.is_urgent === 1).length
      this.jnqsNum = this.projectList.filter(f => f.managent_progress === '缴纳契税').length
      this.djbzNum = this.projectList.filter(f => f.managent_progress === '递件办证').length
      this.qzlqNum = this.projectList.filter(f => f.managent_progress === '权证领取').length
      this.sldyNum = this.projectList.filter(f => f.managent_progress === '受理抵押').length
      this.qkwjNum = this.projectList.filter(f => f.payment_progress === '全款完结').length
      this.dkwjNum = this.projectList.filter(f => f.payment_progress === '贷款完结').length
      this.tzkhNum = this.projectList.filter(f => f.delivery_progress === '通知客户').length
      this.jfkhNum = this.projectList.filter(f => f.delivery_progress === '交付客户').length
      this.hzfkNum = this.projectList.filter(f => f.delivery_progress === '回执房开').length
    })
  }
}
</script>

<style scoped>
.container{
  margin-left: 30%;
  font-size: large;
}
.num-div{
  color: cornflowerblue;
  margin-top: 2%;
}
.num-span{
  margin-left: 10px;
}
</style>
